<template>
    <div id="zxCupon">
        <popup v-model="show" position="bottom" style="width:100%;" :closeOnClickModal="false">
            <div id="get_ticket" style="display: flex;min-height:50vh;max-height:70vh;flex-direction: column;" >
                <!--<div class="description_tit" ref="testPop">
                    领券更优惠
                    <div class="close_page m_close_page">
                        <i></i>
                        <i></i>
                        <i></i>
                    </div>
                </div>-->
              	<div style="overflow-y: auto;flex:1">
              		<ul class="coupon_list" v-if="yhData && yhData.length" style="text-align: left;">
              			<!--:class="{addBorder:coupon.couponCodeList.length > 1}"-->
	                	<div style="margin-top: 0.75rem;"  v-for="(coupon, index) in yhData" :key="index"  >
		                    <li   v-for="(item,index) in coupon.couponCodeList" :key="index"
		                        	:class="{delMargin:coupon.couponCodeList.length > 1}"
		                    >		<!--couponType 2为优惠券    1为折扣券 -->
		                       <!--:class="[item.state ? 'yh-useable' : 'yh-disable']"-->
			                       	<div class="account_money backGround" :class="{account_money_zx:coupon.couponCodeList.length > 1}" style="line-height:0;" v-if="item.couponType == '2'">
			                            ¥
			                            <span style="line-height:1.8rem;font-size: 1rem;">{{item.couponAmount}}</span> 
			                            <span></span> 
			                           
			                            <!--item.couponAmount 优惠金额-->
			                           	<!--<div v-if="coupon.couponCodeList.length > 1">
			                           		 <div class="couponArr">组</div>
			                           	</div>-->
			                            <span style="font-size: 12px;line-height: 20px;display: block;color: #38b035;width: 100%;overflow: hidden;white-space: nowrap;">
			                                <!--可用：¥{{item.couponAmount}}-->
			                            </span>    
			                        </div>
			                        <div class="account_money backGround" :class="{account_money_zx:coupon.couponCodeList.length > 1}" style="line-height:0;" v-if="item.couponType == 1">
			                            
			                            <span style="line-height:1.8rem;font-size: 1.2rem;" >{{item.couponDiscount}}折</span>  <!--item.couponDiscount 折扣-->
			                            <!--<div v-if="coupon.couponCodeList.length > 1">
			                           		 <div class="couponArr">组</div>
			                           	</div>-->
			                           <span style="font-size: 12px;line-height: 20px;display: block;color: red;width: 100%;overflow: hidden;white-space: nowrap;">
			                                <!--可用：¥{{item.couponAmount}}-->
			                            </span>    
			                        </div>
			                        <dl>
			                            <dt class="youhui">{{item.couponName}}</dt>								<!-- -->			<!--{{item.fullElement}}-->
			                            <dd class="rules" v-if="item.useRange" style="margin-right: 0.2rem;">{{getCouponType(item)}}</dd><dd v-if="item.fullElement" class="rules">满{{item.fullElement}}使用</dd>   <!--使用规则-->
			                            <!-- <p>过期时间:{{item.availableEndTime}}</p>  {{item.availableStartTime.split(" ")[0]}} -->
										<p>有效期时间:{{ item.availableStartTime}}-{{ item.availableEndTime}}</p> 
			                        </dl>
			                        <em v-if="coupon.couponCodeList.length > 1">组合</em>
			                        <input type="checkbox" class="aui-radio yh-radio" :class="{backGroundC:item.relIndex == activeIndex}" style="top: 1.65rem;" :checked="item.relIndex == activeIndex" @click.stop="choose($event,item,index)" ref="yhRadio" >
		                      
		                    </li>
	                     </div>
	                </ul>
	                <div v-if="!yhData || !yhData.length" style="margin-top:2rem;margin-bottom:2rem;width:100%;text-align:center;">暂无优惠券</div>
              	</div>
                <div class="cuponChoose aui-btn aui-btn-danger aui-btn-block aui-btn-sm" style="background:#38b035 !important;">
                    <div id="close_coupon" style="font-size: 1rem;" @click.stop="chooseYHEvent">确 定</div>
                </div>
            </div>
        </popup>
    </div>
</template>
<script>
import { Popup } from 'mint-ui';
import {mapMutations} from 'vuex';
import {Toast} from "../../../utils/toast";
export default {
    props: {
    	getCouponMoney: {
    		type: Function,
    		default: ()=>{}
    	},
        text: {
            type: String,
            default: "使用"
        },
        used: {
            type: String,
            default: "已用"
        },
        freight: {
            type: Number,
            default: 0
        },
        couponArr: {
        	type: Array,
        	default:function(){
        		let arr = [];
        		return arr;
        	}
        },
        couponArrHtm:{
        	type: Array,
        	default:function(){
        		let arr = [];
        		return arr;
        	}
        },
        money: {
        	type:Number,
        	default: function(){
        		return 0
        	}
        },
        couponMoney: {
        	type:Number,
        	default: function(){
        		return 0
        	}
        }
    },
    data() {
        return {
            show: false,
            flag: 0,
            yhData: [],
            ticketList: [],
            maxCoupon:null,  // 优惠券力度最大优惠券
            activeIndex:-1
        }
    },
    computed: {
    
        totalMoney(newVal,oldVal){
        	return this.money
        }
    },
    methods: {
    	...mapMutations('zx',[
    		"setTicketList"
    	]),
        showCover() {
            this.show = true;
            this.flag = 1;
//          this.getYHData();
			
        },
        closeCover() {
            // setTimeout(() => {
                this.show = false;
                this.flag = 0;
            // }, 100);
            
        },
        //	GOODS("商品券", 1), CLASSES("基本品类券", 2), BRANDS("品牌券", 3), ALL("全场券", 4), ZY_CLASSES("运营品类券", 5);
        getCouponType(item){ 
        	if(!item){
        		return
        	}
        	var str = '';
        	if(item.useRange == 1){
        		str = "商品券";
        	}else if(item.useRange == 2){
        		str = "基本品类券";
        	}else if(item.useRange == 3){
        		str = "品牌券";
        	}else if(item.useRange == 4){
        		str = "全场券";
        	}else if(item.useRange == 5){
        		str = "运营品类券";
        	}
        	
        	return str;
        },
//      选择优惠券
        choose(event,item,index){	
//      	if(event.target.checked){
//      		if(this.totalMoney == 0){
//	        		event.target.checked = false;
//	        		Toast({
//	                        message: '优惠金额超过支付金额',
//	                        type: "fail",
//	                        duration: 1600
//	                   });
//		        }
//      	}
			
			// console.log("activeIndex:",this.activeIndex,"relIndex:",item.relIndex)
			// console.log(item,'点击的对象');
			if(this.activeIndex != item.relIndex){
				this.activeIndex = item.relIndex;
			}else{
				this.activeIndex = -1;
			}
        	
        	this.pushCoupon();
        	
        },
//      确定优惠券
        chooseYHEvent(event){
        	//event.target
//      	console.log(event,'event.target')
			this.setTicketList(this.ticketList);
			event.preventDefault();
        	if(this.yhData && this.yhData.length){
        		this.getCouponMoney(false);
//      		if(this.getTicketList && this.getTicketList.length){
//      			this.getCouponMoney(event.target);
//      		}
        	}
        	this.closeCover();
        },
//      选择优惠券存优惠券信息
        pushCoupon(){
        	this.ticketList = [];
			
			for(let i = 0; i < this.couponArr.length; i ++){
				// console.log(this.couponArr[i])
				if(this.couponArr[i].relIndex == this.activeIndex){
					// console.log(this.couponArr[i].relIndex,'选中的优惠券数组');
					this.ticketList.push(this.couponArr[i]);
				}
			}
			
        },
//      初次进来默认选择优惠力度最大的优惠券
		setCouponChoose(){
            
			var arr = this.maxCoupon.couponCodeList;
			for(let i = 0 ; i < arr.length; i++){
				this.ticketList.push(this.couponArr[i]);
			}
			this.activeIndex = this.maxCoupon.couponCodeList[0].relIndex;
			// console.log(this.ticketList,'优惠券zzz')
            this.setTicketList(this.ticketList);
            
			// this.getCouponMoney();//2018.5.8   后台改动返回金额为选择最优优惠券之后的金额 此处无需调接口
		},
        initCupon(){
            console.log(this.couponArrHtm,'123456');
        	if(this.couponArrHtm && this.couponArrHtm.length){
	      	   let arr1 = [];
		       let arr2 = [];
               var obj =  this.couponArrHtm[0];
               var num = this.couponArrHtm[0].priority;
//		       console.log(this.couponArrHtm,'可用优惠券数据，取出priority最小的那个 priority越小优惠力度越大');
		       for(let i = 0 ; i < this.couponArrHtm.length; i++){
		       		if(this.couponArrHtm[i].priority < num){
		       			obj = this.couponArrHtm[i];
		       		}
		       		//console.log(this.couponArrHtm[i].priority,'优惠力度');
		       		//组合券放在前面展示
		       		if(this.couponArrHtm[i].couponCodeList.length > 1){
		       			arr1.push(this.couponArrHtm[i]);
		       		}else{
		       			arr2.push(this.couponArrHtm[i])
		       		}
		       }
		       // console.log('嘿嘿 优惠券',arr1,arr2)
		       this.yhData = arr1.concat(arr2);
		       this.maxCoupon = obj;
		       this.setCouponChoose();  // 设置默认选择的优惠券
	       }
        },
        //解决ios显示不了 的兼容问题
    	appendZxCupon(){
    		console.log('链接地址',this.$route.name)
    		if(document.querySelector("#zxCupon") && this.$route.name === 'confirmOrder'){
    			setTimeout(()=>{
	    			document.querySelector(".confirm-order-box").appendChild(document.querySelector("#zxCupon"))
	    		},300)
    		}
    	}
    },
    components: {
        "popup": Popup
    },
    mounted(){
    	this.appendZxCupon();
    },
    created() {
       this.initCupon();	
    },
    beforeDestroy(){

    },
    watch: {
        // show(newVal) {
        //     if (this.show === true) {

        //     }
        // },
        couponArr(){
        	this.yhData =  this.couponArrHtm;
        	// console.log(this.yhData,'自组建监控')
        },
        //现在不用监控
        // couponArrHtm(){
        	// this.initCupon();
      	    //console.log('html优惠')
        // }
    }

}
</script>

<style scoped="scoped">
.backGround{
    color:#38b035 !important;
}
.backGroundC{
    background:#38b035;
}
.aui-toast {
    z-index: 9999;
}
.yh-radio {
    position: absolute;
    right: 1rem;
    top: 1rem;
}
.yh-useable {
    /*background: #fff url("../../../../static/image/coupon_bj.png") no-repeat right 2.8rem !important;*/
}
.yh-disable {
    /*background: #fff url("../../../../static/image/coupon_bj2.png") no-repeat right 2.8rem !important;*/
}
.coupon_list li{
	background: #FFFFFF;
}
.coupon_list .account_money_zx{
	background: url("../../../../static/image/coupon_bj_leftRed.png") no-repeat left -1rem;
	background-size: 75%;
}
.coupon_list li em {
    position: absolute;
    left: 0.08rem;
    top: 0.15rem;
    bottom: unset !important;
    right: unset !important;
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    color: #ffffff;
    font-size: 12px;
}
.m_close_page {
    /* padding: 0.4rem 0.6rem; */
    padding: 0;
    cursor: pointer;
    margin-left: unset; 
    margin-top: unset; 
    position: absolute;
    top: 0;
    left: unset;
    right: 1rem;    
    top: 8px;
}
.description_tit {
    text-align: left;
    padding: 0 1rem;
}
.youhui{
	
	width: 10.52rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rules{
	color: #38b035;
    border: 1px solid #38b035;
    display: inline;
    padding: 0.1rem;
    border-radius: 0.1rem;
}

.couponArr{
	padding-top: 0.3rem;
	border: 1px solid #38b035;
	border-radius: 50%;
	width: 1rem;
	height: 1rem;
	line-height: 0.3rem;
	text-align: center;
	margin-left: 40%;
}
.couponInner{
	
}
.addBorder{
	border: 1px solid #38b035;
}
.addBorder li:last-child{
	border-bottom:0px solid #eaeaea;	
}
.delMargin{
	margin-bottom: 0 !important;
	/*border: 0;*/
	border-bottom: 0px solid #eaeaea;
}
.delMargin:last-of-type{
	border-bottom: 0.5px solid #eaeaea;
}
.cuponChoose{
	height: 2.5rem;
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    border-top: 1px solid #eaeaea;
    padding: 0.5rem 0.75rem 0;
    /*margin-bottom: 0.8rem;*/
   border-radius: 0px;
}
</style>


